<template>
    <div>
        <HETTable ref="programWhitelistTable"
            :pageSize="10" 
            :tableFields="whitelistTableFields" 
            :tableData="TableData"
            :enableSearch="true"
            :tableCheckbox="true"
            :headerOperation="headerOperation"
            :handleSelectionChange="handleSelectionChange" 
            :total="whitelistTotal"
            @getTableData="getWhitelist">
        </HETTable>
        <AddDialog ref="addDialog" :form="form" :policyId="policyId" :title="title" @AddhandleDialog="AddhandleDialog"></AddDialog>
        <DirectoryDialog ref="whitelistDirRef" :dirFlag="false" :typeRestrictions="typeRestrictions" @handleDialogButton="handleDialogButton" :multipleChoice="false"   :os="treeStore.osType"></DirectoryDialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import HETTable from '~/components/common/HETTable.vue'
import { ElMessage } from 'element-plus'
import { 
    req_getWhitelist,
    req_getWhitelistPolicylist,
    req_setWhitelistFile,
    req_deleteWhitelistFile
} from '~/utils/axios/programWhitelist.js'
import { useTreeStore } from "~/utils/pinia/tree.js"
import AddDialog from "~/components/StrategyManagement/common/AddDialog.vue"
import DirectoryDialog from '~/components/common/DirectoryDialog.vue'
import { Refresh, Delete, Edit, Plus, Download, Upload } from '@element-plus/icons-vue'
const successElMessage = () => {
    ElMessage({
        message: '修改成功',
        type: 'success',
    })
} 
const props = defineProps({
    policyId: {
        type: Number,
        default: 0
    },
    title: {
        type: String,
        default: '添加文件'
    },
    typeRestrictions: {
        type: Array,
        default: ['exe','bat','vbs','cmd','reg','msc','msi','cpl','fon','wsh','ps1','wsf']
    }
})
/**
 * 
 * 树形目录组件
 * 
 * ***/ 
// 树形目录ref
const whitelistDirRef = ref()
// 树形目录组件pinia注册
const treeStore = useTreeStore()
// 树形目录组件点击确定时获取path
const handleDialogButton = (ref,path) => {
        form.file = path;
}
// 表格复选框选中的值
let selectionChangeValue = ref()
// 表格删除等按钮是否可点击
let handleSelectionChangeFlag = ref(true)
/**
 * 
 * AddDialog 组件
 * 
 * ***/
// AddDialog 组件 ref
const addDialog = ref()
// AddDialog 组件点击确认时的回调函数
const AddhandleDialog = async () => {
    let importParams = {
        deviceId: treeStore.treeDeviceId,
        policyId: props.policyId,
        json:[{
                filename: form.file,
                filemd5: '',
                termSpec: form.desc,
        }]
    }
    await req_setWhitelistFile(importParams).then(res => {
        if(res.data.succeed){
            successElMessage()
        }else{
            ElMessage.error('文件错误')
        }
    },err => {
        ElMessage.error(err)
    })
    programWhitelistTable.value.getTableData()
}
/**
 * 
 * 表格
 * 
 * ***/
// 表格ref
let TableData = ref()
let form = reactive({
    policyName: '',
    file: '',
    desc: ''
})

// 表格ref
const programWhitelistTable = ref()
// 表格数据的数量
let whitelistTotal = ref(0)
// 应用程序白名单
const whitelistTableFields = reactive([
    { name: "filename", label: "文件名"},
    { name: "filepath", label: "路径" },
    { name: "filemd5", label: "指纹特征" },
    { name: "filesize", label: "文件大小" },
    { name: "filetype", label: "文件类型"},
    { name: "termSpec", label: "文件描述"},
])


const delWhitelist = async () => {
    if(!treeStore.treeDeviceId){
        return
    }
    let arr = [];
    selectionChangeValue.value.filter(item => {
        arr.push(item.specwtoid)
    })
    let deleteWhitelistParams = {
        deviceId: treeStore.treeDeviceId,
        policyId: props.policyId,
        json:arr
    }
    await req_deleteWhitelistFile(deleteWhitelistParams).then(res => {
        successElMessage()
    },err => {
        ElMessage.error(err)
    })
    programWhitelistTable.value.getTableData()
}
// 点击添加文件时需要的函数，主要请求数据
const addFileWhitelist = () => {
    // treeStore.directoryDialogVModel = true;
    if(!treeStore.treeDeviceId){
        return
    }
    let querywhitelistStatus = {
        page: 0,
        size: 10,
        policyId: props.policyId
    }
    req_getWhitelistPolicylist(treeStore.treeDeviceId,querywhitelistStatus).then(res => {
        form.policyName = res.data.policyList[0].policyName
    })
    addDialog.value.dialogVisibleFn(true);
}
const headerOperation = [
    { name: '删除', ev: delWhitelist, icon: Delete, disabled: handleSelectionChangeFlag },
    { name: props.title, ev: addFileWhitelist, icon: Plus, },
]
// 表格中用户选择复选框时的函数
const handleSelectionChange = (val) => {
    selectionChangeValue.value = val;
    if (val.length >= 1) {
        handleSelectionChangeFlag.value = false;
    } else {
        handleSelectionChangeFlag.value = true;
    }
}
const getWhitelist = async (countParams, searchParams, tableSearch) => {
    if(!treeStore.treeDeviceId){
        return
    }
    let whitelistParams = {
        page: searchParams.$page,
        size: searchParams.$limit,
        type: 1,
        policyId: props.policyId,
        key:tableSearch
    }
    await req_getWhitelist(treeStore.treeDeviceId,whitelistParams).then( res => {
        TableData.value = res.data.whiteList
        whitelistTotal.value = Number(res.data.total) || 0;
    },err => {
        ElMessage.error(err)
    })
    programWhitelistTable.value.finish()
}

treeStore.treeLinkedTableRef = programWhitelistTable;
</script>

<style lang="scss" scoped>
    
</style>